﻿<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>


<div id="app">
    <el-form name="humanfileForm" method="post" ref="ruleFormRef"
             :model="ruleForm"
             :rules="rules"
             label-width="120px"
             class="demo-ruleForm">
        <table width="100%">
            <tr>
                <td>
                    <font color="black">您正在做的业务是：人力资源--招聘管理--职位发布管理--职位发布变更 </font>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <el-button type="primary" v-on:click="submitForm">提交</el-button>
                    <el-button v-on: click="resetForm">清除</el-button>
                </td>
            </tr>
        </table>
        <table width="100%" border="1" cellpadding="0" cellspacing="1"
               bordercolorlight="#848284" bordercolordark="#eeeeee"
               class="TABLE_STYLE1">
            <tr>
                <td class="TD_STYLE1" width="11%">
                    I级机构
                </td>
                <td width="14%" class="TD_STYLE2">
                    <el-form-item prop="FirstKind">
                        <el-select v-model="ruleForm.FirstKind" disabled placeholder="请选择I级机构名称" value-key="firstKindId" v-on:change="one" style="width: 100%">
                            <el-option v-for="item in CFFKOption"
                                       :key="item.firstKindId"
                                       :label="item.firstKindName"
                                       :value="item" />
                        </el-select>
                    </el-form-item>
                </td>
                <td class="TD_STYLE1" width="11%">
                    II级机构
                </td>
                <td width="14%" class="TD_STYLE2">
                    <el-form-item prop="SecondKind">
                        <el-select v-model="ruleForm.SecondKind" disabled placeholder="请选择II级机构名称" value-key="secondKindId" v-on:change="two" style="width: 100%">
                            <el-option v-for="item in CFSKOption"
                                       :key="item.secondKindId"
                                       :label="item.secondKindName"
                                       :value="item" />
                        </el-select>
                    </el-form-item>
                </td>
                <td class="TD_STYLE1" width="11%">
                    III级机构
                </td>
                <td width="14%" class="TD_STYLE2">
                    <el-form-item prop="ThirdKind">
                        <el-select v-model="ruleForm.ThirdKind" disabled placeholder="请选择III级机构名称" value-key="thirdKindId" style="width: 100%">
                            <el-option v-for="item in CFTKOption"
                                       :key="item.thirdKindId"
                                       :label="item.thirdKindName"
                                       :value="item" />
                        </el-select>
                    </el-form-item>
                </td>
                <td class="TD_STYLE1" width="11%">
                    招聘类型
                </td>
                <td width="14%" class="TD_STYLE2">
                    <el-form-item prop="EngageType">
                        <el-select v-model="ruleForm.EngageType" placeholder="请选择招聘类型" class="right-aligned-input" style="width: 100%;">
                            <el-option label="社会招聘" value="社会招聘"></el-option>
                            <el-option label="校园招聘" value="校园招聘"></el-option>
                        </el-select>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    职位分类
                </td>
                <td class="TD_STYLE2">
                    <el-select v-model="ruleForm.majorKind" disabled placeholder="请选择职位分类" value-key="majorKindId" v-on:change="Three" style="width: 100%">
                        <el-option v-for="item in CMKOption"
                                   :key="item.majorKindId"
                                   :label="item.majorKindName"
                                   :value="item" />
                    </el-select>
                </td>
                <td class="TD_STYLE1">
                    职位名称
                </td>
                <td class="TD_STYLE2">
                    <el-form-item prop="Major">
                        <el-select v-model="ruleForm.Major" disabled placeholder="请选择职位昵称" value-key="majorId" style="width: 100%">
                            <el-option v-for="item in CMOption"
                                       :key="item.majorId"
                                       :label="item.majorName"
                                       :value="item" />
                        </el-select>
                    </el-form-item>
                </td>
                <td class="TD_STYLE1">
                    招聘人数
                </td>
                <td class="TD_STYLE2">
                    <el-form-item prop="HumanAmount">
                        <el-input v-model="ruleForm.HumanAmount" class="right-aligned-input" style="width: 100%;" oninput="this.value = this.value.replace(/[^0-9]/g, '')"></el-input>
                    </el-form-item>
                </td>
                <td class="TD_STYLE1">
                    截止日期
                </td>
                <td class="TD_STYLE2">
                    <div class="block">
                        <span class="demonstration"></span>
                        <el-date-picker v-model="ruleForm.Deadline"
                                        type="date"
                                        placeholder="请选择截止日期"
                                        :size="size" />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    变更人
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="ruleForm.Changer" readonly class="right-aligned-input" style="width: 100%;" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    变更时间
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="ruleForm.ChangeTime" readonly class="right-aligned-input" style="width: 100%;" readonly></el-input>
                </td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    职位描述
                </td>
                <td class="TD_STYLE2" colspan="8">
                    <el-form-item prop="MajorDescribe">
                        <el-input type="textarea" v-model="ruleForm.MajorDescribe" rows="4" cols="80" class="TEXTAREA_STYLE1"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    招聘要求
                </td>
                <td class="TD_STYLE2" colspan="8">
                    <el-form-item prop="EngageRequired">
                        <el-input type="textarea" v-model="ruleForm.EngageRequired" rows="4" cols="80" class="TEXTAREA_STYLE1"></el-input>
                    </el-form-item>
                </td>
            </tr>
        </table>
        @*     </form> *@
</div>
<script>
    window.userTrueName = '@ViewBag.UserTrueName'; // 将ViewBag的值赋给全局变量，方便Vue实例获取
    const { createApp, ref, reactive, computed, onMounted } = Vue;
    const { ElMessage } = ElementPlus
    const app = createApp({
        setup() {
            // const mreid = ref(null);保存id
            const ruleFormRef = ref(null);
            const ruleForm = reactive({
                mreid:"",
                HumanAmount: "",//招聘人数
                EngageType: "",//招聘类型
                Deadline: "",//截止日期
                Changer: window.userTrueName,//变更人
                ChangeTime: "",//变更时间
                MajorDescribe: "",//职位描述
                EngageRequired: "",//招聘要求

                FirstKind: {},//一级机构，对象获取FirstKindId，FirstKindName
                SecondKind: {},//二级机构，对象获取SecondKindId,SecondKindName
                ThirdKind: {},//三级机构，对象获取ThirdKindId，ThirdKindName
                Major: {},//职位，对象获取MajorId,MajorName
                majorKind: {},//职位分类
            });
            ruleForm.FirstKind = "";//清空一级下拉框
            ruleForm.SecondKind = "";//清二级下拉框
            ruleForm.ThirdKind = "";//清空三级下拉框
            const CFFKOption = ref([])//一级机构下拉框数据
            const CFFKId = ref(null);//保存一级数据的id
            const CFSKOption = ref([]);//二级机构下拉框数据
            const CFSKId = ref(null);//保存二级数据的id
            const CFTKOption = ref([]);//三级机构下拉框数据

            ruleForm.Major = "";//清空职位分类下拉框
            const CMKOption = ref([]);//保存职位分类下拉框数据
            const CMKId = ref(null);//保存职位分类数据的Id
            const CMOption = ref([]);//保存职位昵称下拉框数据
            var timi = ref(null);

            // 初始化时获取当前时间
            const tick = () => {
                const now = new Date();
                ruleForm.ChangeTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
                setTimeout(tick, 1000);
            };

            onMounted(() => {
                tick();
                ruleForm.ChangeTime = timi.value
            });

            const time = ref(new Date().toISOString());
            setInterval(() => {
                time.value = new Date().toISOString();
            }, 1000);

            const majorKinds = ref([
                { value: '01', label: '销售' },
                { value: '02', label: '软件开发' },
                { value: '03', label: '人力资源' },
                { value: '04', label: '生产部' }
            ]);


            const rules = ref({
                EngageType:[{required: true, message: '请选择招聘类型', trigger: 'change'}],
                HumanAmount:[{required: true, message: '请输入招聘人数', trigger: 'change'}],
                MajorDescribe:[{required: true, message: '请输入职位描述', trigger: 'change'}],
                EngageRequired:[{required: true, message: '请输入招聘要求', trigger: 'change'}],

            });

            const onSelectChange = (value) => {
                // 如果需要根据职位分类加载职位名称选项，可以在这里添加逻辑
            };

            function fill(){
                axios.get("/EMR/EMRSelectId").then(res=>{
                    ruleForm.HumanAmount = res.data.humanAmount;
                    ruleForm.MajorDescribe = res.data.majorDescribe;
                    ruleForm.EngageRequired = res.data.engageRequired;
                    ruleForm.EngageType = res.data.engageType;
                    ruleForm.Deadline = res.data.deadline;
                    ruleForm.FirstKind = res.data.firstKindName;
                    ruleForm.SecondKind = res.data.secondKindName;
                    ruleForm.ThirdKind = res.data.thirdKindName;
                    ruleForm.Major = res.data.majorName;
                    ruleForm.mreid = res.data.mreId
                    CMSelectName(res.data.majorName)
                    console.info("ididididid"+res.data.mreId);
                }).catch(err=>{
                    console.info(err)
                })
            }   
            fill()

            function CMSelectName(name){
                axios.get("/EMR/CMSelectName",{
                    params:{
                        name:name
                    }
                }).then(res => {
                    ruleForm.majorKind = res.data.majorKindName
                }).catch(err=>{
                    console.info(err)
                })
            }
            
            function submitForm() {
                ruleFormRef.value.validate((valid, fields) => {
                    if (valid) {
                        let EMRdata = {};
                        //合并除了对象的数据到EMRdata
                        for (const key in ruleForm) {
                            if (key !== 'FirstKind' && key !== 'SecondKind' && key !== 'ThirdKind' && key !== 'Major') {
                                EMRdata[key] = ruleForm[key]
                            }
                        }
                        console.info(EMRdata)

                        axios.put("/EMR/EMRUpdateAsync111", {
                            eMRUpdateDto: EMRdata
                        }, {
                            headers: {
                                "Content-type": "application/x-www-form-urlencoded",
                                //或其他格式
                            },
                        }).then(res => {
                            if (res.data > 0) {
                                ElMessage({
                                    type: 'success',
                                    message: '修改成功！'
                                });
                                setInterval(()=>{
                                    window.location.href = "/EMR/IndexShow"
                                },1000)
                            } else {
                                ElMessage({
                                    type: 'erroe',
                                    message: '修改失败！'
                                });
                            }
                        }).catch(err => {
                            // ElMessage({
                            //     type: 'erroe',
                            //     message: '添加失败！' + err
                            // });
                            console.info(err)
                        })
                    }
                    })

            }

            const resetForm = () => {
                ruleFormRef.value.resetFields();
            };

            //查询一级下拉框
            function CFFKSelectOption(){
                axios.get("/EMR/CFFKSelectOption").then(res=>{
                    CFFKOption.value = res.data;
                    console.log(CFFKOption.value)
                }).catch(Error=>{
                    console.log(Error)
                })
            }
            //一级下拉框点击事件
            function one(value){
                CFFKId.value = value.firstKindId
                ruleForm.SecondKind = ""
                ruleForm.ThirdKind = ""
                CFSKSelectOption();
            }
            //查询二级下拉框
            function CFSKSelectOption() {
                axios.get("/EMR/CFSKSelectid", {
                    params: {
                        id: CFFKId.value
                    }
                }).then(res => {
                    CFSKOption.value = res.data
                }).catch(err=>{
                    console.info(err)
                })
            }
            //点击二级下拉框
            function two(value){
                CFSKId.value = value.secondKindId
                ruleForm.ThirdKind = ""
                CFTKSelectOption();
            }
            //查询三级下拉框
            function CFTKSelectOption(){
                axios.get("/EMR/CFTKSelectCFSKCFFKId",{
                    params:{
                        fid: CFFKId.value,
                        sid: CFSKId.value
                    }
                }).then(res=>{
                    CFTKOption.value = res.data
                }).catch(err=>{
                    console.info(err)
                })
            }
            //查询职位分类下拉框
            function CMKSelect(){
                axios.get("/EMR/CMKSelectMax").then(res=>{
                    CMKOption.value = res.data
                }).catch(err=>{
                    console.info(err)
                })
            }
            //点击职位分类下拉框
            function Three(value){
                CMKId.value = value.majorKindId
                CMSelect();
            }
            function CMSelect(){
                axios.get("/EMR/CMSelectId",{
                    params:{
                        id:CMKId.value
                    }
                }).then(res=>{
                    CMOption.value = res.data
                }).catch(err=>{
                   console.info(err)
                })
            }
            CMKSelect();
            CFFKSelectOption();
            return {
                ruleForm,
                rules,
                ruleFormRef,
                majorKinds,
                onSelectChange,
                submitForm,
                resetForm,
                CFFKOption,
                one,
                CFFKId,
                CFSKSelectOption,
                CFSKOption,
                CFSKId,
                two,
                CFTKSelectOption,
                CFTKOption,
                CMKOption,
                Three,
                CMKId,
                CMSelect,
                CMOption,
                timi,
                CMSelectName
            };
        }
    }).use(ElementPlus).mount('#app');

</script>

<style type="text/css">
    body {
        background-color: #ffffcc;
    }

    .right-aligned-input {
        text-align: right;
        width: 20ch; /* 20 characters */
    }

    .el-input__inner, .el-select .el-input__inner {
        text-align: right;
        width: 20ch; /* 20 characters */
    }


    .TABLE_STYLE1 {
        width: 100%;
    }

    /*     .TD_STYLE1 {
                background-color: #f0f0f0;
                padding: 8px;
                font-weight: bold;
            } */

    .TD_STYLE2 {
        padding: 8px;
    }

    .TD_STYLE4 {
        line-height: 36px; /* 使标签高度与输入框一致 */
        vertical-align: middle;
        margin-left: 0;
        display: grid;
        place-items: center;
    }

    .el-form-item__content {
        margin-left: 0px !important;
    }
    /* 去除浏览器默认宽度 */
    body .container, body main {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        max-width: none !important;
    }

    body {
        font-size: 13px;
        background-color: #ffffcc;
    }

    .BUTTON_STYLE1 {
        BORDER-RIGHT: #2C59AA 1px solid;
        PADDING-RIGHT: 2px;
        BORDER-TOP: #2C59AA 1px solid;
        PADDING-LEFT: 2px;
        FONT-SIZE: 12px;
        background: linear-gradient(to bottom, #ffffff, #C3DAF5);
        BORDER-LEFT: #2C59AA 1px solid;
        CURSOR: pointer;
        COLOR: black;
        PADDING-TOP: 2px;
        BORDER-BOTTOM: #2C59AA 1px solid
    }

    .TABLE_STYLE1 {
        border: 1px solid;
        border-color: #000000;
        border-collapse: collapse;
        width: 100%;
    }

    .TD_STYLE1 {
        background-color: #FFDB6F;
        border-width: 1px;
    }

    .TD_STYLE2 {
        border-spacing: 1px;
        background-color: #FFFFBB;
        border-color: #DEDBD6;
        border: 0;
    }

    .INPUT_STYLE1 {
        BACKGROUND-COLOR: #FFFFCC;
        width: 30%
    }

    .TEXTAREA_STYLE1 {
        BACKGROUND-COLOR: #FFFFCC;
        width: 100%;
    }

    table:nth-of-type(2) {
        border: 1px solid black;
        border-collapse: collapse;
    }

        table:nth-of-type(2) td {
            border: 1px solid black;
        }

</style>